<template>
	<view>
		<view class="">
			<view class="bg">
				<view class="center d-flex"
					style="border-radius: 50%;height: 338upx;display: flex;align-items: center;justify-content: center;">
					<!-- <view class="title" @click="show">更换头像</view> -->
					<robby-image-upload :src="icon" :width="width" :height="height" :lineheight="lineheight"
						:borderRadius="borderRadius"></robby-image-upload>
				</view>

				<bjx-form class="form" :rules="rules" :form="uIfo" ref="form">
					<!-- <view class="form-item">
						<bjx-form-item class="realname-user" label-type="inline" prop="nickname" label="昵称">
							<input class="realname-content" type="text" value="" placeholder="请输入昵称"
								v-model="uIfo.nickname" name="nickname" />
						</bjx-form-item>
					</view> -->
					<view class="form-item">
						<bjx-form-item class="realname-user" label-type="inline" prop="realname" label="姓名"
							style="letter-spacing: 4px;">
							<input class="realname-content" type="text" value="" placeholder="请输入真实姓名"
								v-model="uIfo.realname" />
						</bjx-form-item>
					</view>

					<view class="submit-box">
						<view class="submit" @tap="conSubmit">
							确&nbsp;定
						</view>
					</view>
				</bjx-form>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	// import robbyImageUpload from '@/components/robby-image-upload/robby-image-upload.vue';
	export default {
		data() {
			return {
				icon: '',
				uIfo: {},
				width: '194upx',
				height: '194upx',

				lineheight: '194upx',
				borderRadius: '50%',
				popupClass: 'none',
				rules: {
					// nickname: {
					// 	required: true,
					// 	rule: 'type:string|length:~,20',
					// 	message: {
					// 		length: '昵称不能超过20个字符'
					// 	}
					// },
					realname: {
						required: true,
						rule: 'type:string|length:~,20',
						message: {
							length: '姓名不能超过20个字符'
						}
					}
				},
			};
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		onLoad() {
			this.loadData();

			uni.$on('changeHeadimg', (option) => {
				let data = JSON.parse(option)

				this.icon = data.data;
				this.headimg(data.data)
			})

			uni.$on('changeUser', () => {
				this.loadData();
			})
		},
		methods: {

			async loadData() {
				if (!this.hasLogin) {
					this.$api.msg('请先登录！', 'none');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login',
						})
					}, 1000)
					return false;
				}
				uni.showLoading({
					title: '加载中...'
				});
				let token = uni.getStorageSync('token');
				if (!token) {
					this.$api.msg('token缺失！');
					uni.hideLoading();
					return;
				}
				let url = '/getUserInfo';
				let res = await this.$myRequest({
					url: url,
					data: {
						token: token
					},
					methods: 'post'
				})
				let info = res.data.data;
				this.uIfo = info;
				this.icon = this.uIfo.icon ? this.uIfo.icon : '/static/img/user/touxiang.png';
				uni.hideLoading();
			},

			async headimg(headimg) {
				let token = uni.getStorageSync('token');
				let res = await this.$myRequest({
					url: '/headimg',
					data: {
						token: token,
						headimg: headimg
					},
					methods: 'post'
				})
			},

			conSubmit() {
				this.$refs.form.validate(val => {

					if (val == true) {
						let token = uni.getStorageSync('token');
						let dataObj = {
							token: token,
							// nickname: this.uIfo.nickname,
							realname: this.uIfo.realname
						};

						this.submit(dataObj);
					}
				})
			},

			//登录提交
			async submit(dataObj) {
				let res = await this.$myRequest({
					url: '/updateMemberMsg',
					data: dataObj,
					methods: 'post'
				})
				this.$api.msg(res.data.msg, 1000);
				// uni.$emit('changeNickname', {
				// 	nickname: this.uIfo.nickname
				// });
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/user/user'
					})
				}, 1000)
			},

		},
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.bg {
		background-color: white;
		height: 100%;
		width: 100%;

		.center {
			border-bottom: 1px solid #f5f5f5;

			.title {
				flex: 1;
				margin: auto 0;
				margin-left: 20rpx;
				letter-spacing: 3rpx;
				// color: #29ad97;
			}
		}
	}

	.form-item {
		line-height: 90rpx;
		height: 90rpx;
		background: #fff;
		padding: 0 48rpx;
		font-size: 28upx;
		border-bottom: 2upx solid #f8f8f8;

		.realname-content {
			font-size: 28upx;
			color: #333;
		}
	}

	.bjx-form-item {
		padding: 0;
	}

	.submit-box {
		padding: 70rpx 48rpx;

		.submit {
			background-image: linear-gradient(#29ad97, #3ce487);
			height: 88rpx;
			border-radius: 88rpx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>
